<template>
  <div class="role-container">
    <!-- 按钮 -->
    <div class="rc-1">
      <el-button type="primary" size="small" @click="showDialog=true">
        添加角色
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="rc-2">
      <el-table
        :data="roleList"
        stripe
        style="width: 100%"
      >
        <!-- 角色栏 -->
        <el-table-column
          prop="name"
          label="角色"
          width="220"
        >
          <template v-slot="{ row }">
            <div v-if="row.isEdit">
              <el-input v-model="editForm.name" />
            </div>
            <div v-else>{{ row.name }}</div>
          </template>
        </el-table-column>
        <!-- 启动栏 -->
        <el-table-column
          label="启用"
          width="220"
        >
          <template slot-scope="{ row }">
            <div v-if="row.isEdit">
              <el-switch
                v-model="editForm.state"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
            <div v-else>{{ row.state == 1 ? '已启用' : '未启用' }}， {{ row.isEdit }}</div>
          </template>
        </el-table-column>
        <!-- 描述栏 -->
        <el-table-column
          prop="description"
          label="描述"
        >
          <div slot-scope="{row}">
            <div v-if="row.isEdit">
              <el-input v-model="editForm.description" />
            </div>
            <div v-else>{{ row.description }}</div>
          </div>
        </el-table-column>
        <!-- 操作栏 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="{ row }">
            <template v-if="row.isEdit">
              <el-button type="primary" size="small" @click="editSubmitTmp">确定</el-button>
              <el-button size="small" @click="row.isEdit=false">取 消</el-button>

            </template>
            <template>
              <el-button type="text" size="small">分配权限</el-button>
              <el-button type="text" size="small" @click="editRowTmp(row)">编辑</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="confirm(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            <!-- <el-button type="text" size="small" @click="delRoleTmp(row.id)">删除</el-button> -->
            </template>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="rc-3">
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :current-page="form.page"
        :page-size="form.pagesize"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <el-dialog title="新增角色" :visible.sync="showDialog" @close="close">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="ruleForm">
        <el-form-item label="角色名称" label-width="150px" prop="name">
          <el-input v-model="dialogForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="启用" label-width="150px">
          <el-switch
            v-model="dialogForm.state"
            :action-value="1"
            :inaction-value="0"
          />
        </el-form-item>
        <el-form-item label="角色描述" label-width="150px" prop="description">
          <el-input v-model="dialogForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="showDialog = false">取 消</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleRequest, AddRoleRequest, deleteRoleRequest, updateRoleRequest } from '@/api/role'
export default {
  name: 'Role',
  data() {
    return {
      roleList: [],
      total: 0,
      // 分页表单
      form: {
        page: 1,
        pagesize: 5
      },
      // 弹窗表单
      dialogForm: {
        name: '',
        description: '',
        state: 0
      },
      // 下面是编辑/修改的对象
      editForm: {
        name: '',
        description: '',
        state: 1
      },
      // 弹窗表单校验
      ruleForm: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '6-16位', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 1, max: 100, message: '1-100位', trigger: 'blur' }
        ]
      },
      // 弹窗开关
      showDialog: false

    }
  },
  created() {
    this.getRole()
  },
  methods: {
    // 获取当前角色列表
    async getRole() {
      const res = await getRoleRequest(this.form)
      console.log(res)
      this.roleList = res.data.rows
      this.total = res.data.total
      this.roleList.forEach(item => {
        this.$set(item, 'isEdit', false)
      })
    },
    // 控制当前页数的改变事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.form.page = val
      this.getRole()
    },
    // 关闭弹窗
    close() {
      this.showDialog = false
      this.$refs.ruleForm.resetFields()// 重置表单
    },
    // 提交表单
    submitForm() {
      this.$refs.dialogFormRef.validate(async valid => {
        if (valid) {
          // console.log(this.dialogForm)
          await AddRoleRequest(this.dialogForm)// 发送添加角色请求
          this.close()// 关闭弹窗
          this.$message.success({ message: '添加成功' })// 弹出提示框
          this.getRole()// 刷新列表
        }
      })
    },
    // 删除角色
    async confirm(id) {
      try {
        // 发送删除请求
        await deleteRoleRequest(id)
        // 删除成功后弹出提示
        this.message({
          type: 'success',
          message: '删除成功'
        })
        // 当我去删除最后一页的时候.当最后一页只有一条数据的时候,就会有bug,那么删除最后一页的最后一条数据,那么当前页数应该减一
        if (this.roleList.length === 1) {
          if (this.form.page > 1) {
            this.form.page--
          }
        }
        // 刷新列表
        this.getRole()
      } catch (err) {
        console.log('删除接口报错')
      }
    },
    // 点击编辑按钮的事件
    editRowTmp(row) {
      console.log(row)
      // 不能同时打开两个编辑框,那么就要做一个排他思想,现将其他所有已打开的开关都关不掉,然后再打开自己的开关
      this.roleList.forEach(item => { item.isEdit = false })// 先干掉所有人
      row.isEdit = true// 打开自己
      this.editForm = { ...row }
      console.log(row)
    },
    // 编辑成功提交事件
    async editSubmitTmp() {
      await updateRoleRequest(this.editForm)
      this.$message.success({ message: '更新成功' })
      this.form.page = 1
      this.getRole()
    }
  }

}
</script>

<style lang="scss" scoped>
.role-container{
  margin: 30px 50px;
  .rc-2{
    margin: 20px 0;
  }
  .rc-3{
    text-align: right;
  }
}

</style>
